<template>
  <el-dialog
    :title="title"
    :visible.sync="openSheet"
    width="580px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-upload
      ref="upload"
      :limit="1"
      accept=".xlsx, .xls"
      :headers="headers"
      :action="baseUrl + url"
      :disabled="isUploading"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :on-error="handleFileError"
      :auto-upload="false"
      drag
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">{{ $t('importFileTooltip') }}</div>
      <div slot="tip" class="el-upload__tip text-center">
        <span>{{ $t('importFormatTooltip') }}</span>
        <el-link
          type="primary"
          :underline="false"
          :href="link"
          style="font-size: 12px; vertical-align: baseline"
        >{{ $t('downloadImportTemplate') }}</el-link>
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">{{ $t('submit') }}</el-button>
      <el-button @click="openSheet = false">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { downloadExcelImportTemplateApi } from '@/api/common/common'
import { getToken } from '@/utils/auth';
export default {
  name: 'ExcelImport',
  props: {
    title: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      serial: undefined,
      link: undefined,
      // 是否显示弹出层（用户导入）
      openSheet: false,
      // 是否禁用上传
      isUploading: false,
      // 设置上传的请求头部
      headers: { Authorization: 'JWT ' + getToken() },
      // 上传的地址
      baseUrl: process.env.VUE_APP_BASE_API
    };
  },
  methods: {
    async openSheetDialog(serial) {
      this.openSheet = !this.openSheet
      this.serial = serial
      downloadExcelImportTemplateApi(this.serial).then(response => {
        this.link = response.data.file + '?v=' + Date.now()
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.isUploading = false;
      this.$refs.upload.clearFiles();
      if (response.success) {
        this.targaMessage(this.$t('importSuccess'))
        this.$emit('refreshList');
        this.openSheet = false;
      } else {
        if (typeof response.msg === 'object') {
          var errorMsg = ''
          var delimiter = ''
          for (var key in response.msg) {
            if (errorMsg.length > 0) delimiter = '; '
            errorMsg = errorMsg + delimiter + response.msg[key]
          }
          this.targaMessageBox(this, errorMsg)
        } else {
          this.targaMessageBox(this, response.msg)
        }
      }
    },
    // 文件上传失败处理
    handleFileError(err, file, fileList) {
      this.openSheet = false;
      this.isUploading = false;
      this.$refs.upload.clearFiles();
      this.targaMessageBox(this.title, err.data.msg)
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>

<style></style>
